<template>
    <div>
        <el-dialog :title="form.id ? '编辑账号' : '新增账号'" :width="form.is_admin == 1 ? '30%' : '50%'" :show-close="false"
            :visible.sync="dialogFormVisible" :close-on-click-modal="false" style="height: 100%;"
            custom-class="customclassdialog">
            <el-form :model="form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="企业名称:" :label-width="formLabelWidth">
                            <screenSelect title="" type='input' v-model="form.name" :isValue='form.name'
                                placeholder="请输入" @transfer="valueHeld($event, 'name')" width='250px' position="top"
                                :isBorder="untenFun(form.name)" />
                            <div class="unten" v-if="untenFun(form.name)">请输入企业名称</div>
                        </el-form-item>
                        <el-form-item label="账号:" :label-width="formLabelWidth">
                            <screenSelect title="" type='input' v-model="form.account" :isValue='form.account'
                                placeholder="请输入" @transfer="valueHeld($event, 'account')" width='250px' position="top"
                                :isBorder="untenFun(form.account)" />
                            <div class="unten" v-if="untenFun(form.account)">请输入账号</div>
                        </el-form-item>
                        <el-form-item label="密码:" :label-width="formLabelWidth">
                            <div v-if="form.id">
                                <screenSelect title="" type='input' v-model="form.password" :isValue='form.password'
                                    placeholder="请输入" @transfer="valueHeld($event, 'password')" width='250px'
                                    position="top" />
                            </div>
                            <div v-else>
                                <screenSelect title="" type='input' v-model="form.password" :isValue='form.password'
                                    placeholder="请输入" @transfer="valueHeld($event, 'password')" width='250px'
                                    position="top" :isBorder="untenFun(form.password)" />
                                <div class="unten" v-if="untenFun(form.password)">请输入密码</div>
                            </div>

                        </el-form-item>
                        <el-form-item label="到期时间:" :label-width="formLabelWidth" v-if="form.is_admin == 0">
                            <screenSelect title="" type='daterangemr' v-model="form.exp_date" :isValue='form.exp_date'
                                @transfer="valueHeld($event, 'exp_date')" width='250px' position="top"
                                :isBorder="untenFun(form.exp_date)" />
                            <div class="unten" v-if="untenFun(form.exp_date)">请选择到期时间</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号:" :label-width="formLabelWidth" v-if="form.is_admin == 0">
                            <screenSelect title="" type='input' v-model="form.mobile" :isValue='form.mobile'
                                placeholder="请输入" @transfer="valueHeld($event, 'mobile')" width='250px' position="top"
                                :isBorder="untenFun(form.mobile)" />
                            <div class="unten" v-if="untenFun(form.mobile)">请输入手机号</div>
                        </el-form-item>
                        <!-- <el-form-item label="工号:" :label-width="formLabelWidth">
                            <screenSelect title="" type='input' v-model="form.account" :isValue='form.account'
                                placeholder="请输入" @transfer="valueHeld($event, 'account')" width='250px'
                                position="top" />
                        </el-form-item> -->
                        <el-form-item label="负责人:" :label-width="formLabelWidth" v-if="form.is_admin == 0">
                            <screenSelect title="" type='input' v-model="form.person" :isValue='form.person'
                                placeholder="请输入" @transfer="valueHeld($event, 'person')" width='250px' position="top"
                                :isBorder="untenFun(form.person)" />
                            <div class="unten" v-if="untenFun(form.person)">请输入负责人</div>
                        </el-form-item>
                        <el-form-item label="角色:" :label-width="formLabelWidth" v-if="form.is_admin == 0">
                            <screenSelect title="" type='select' v-model="form.role_id" :isValue='form.role_id'
                                placeholder="请选择" @transfer="valueHeld($event, 'role_id')" :options="roleoptions"
                                position="top" width='250px' :isBorder="untenFun(form.role_id)" />
                            <div class="unten" v-if="untenFun(form.role_id)">请选择角色</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-form-item label="备注:" :label-width="formLabelWidth">
                    <screenSelect title="" type='textarea' v-model="form.remark" :isValue='form.remark'
                        placeholder="请输入" @transfer="valueHeld($event, 'remark')" width='286px' position="top" />
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">关 闭</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import screenSelect from '@/components/screenSelect/index.vue';
import { userList, addto, update, forbidden, getrole } from '@/api/user.js'
import { parseTime } from '@/utils/ruoyi'
export default {
    name: 'WorkspaceJsonAddaccountuser',
    components: {
        screenSelect
    },
    props: {
        optionVal: {
            type: Object
        },
        roleoptions: {
            type: Array
        },
        dialogFormVisible: {
            type: Boolean
        }
    },
    watch: {
        optionVal: {
            handler(ne, ol) {
                this.form = ne
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            formLabelWidth: '100px',
            form: {},
            isUnten: false
        };
    },
    mounted() {
    },
    methods: {
        untenFun(data) {
            if (this.isUnten) {
                if (data == undefined) {
                    return true
                } else {
                    if (data == '' && data != '0') {
                        return true
                    } else {
                        return false
                    }
                }
            } else {
                return false
            }

        },

        valueHeld(childParam, fatherparam) {
            this.isUnten = false
            this.form[fatherparam] = childParam
        },
        cancel() {
            let e = {}
            e.dialogFormVisible = false
            e.form = this.form
            this.$emit('cancelHeld', e);
        },
        save() {
            this.isUnten = true

            if (this.form.is_admin == 0) {
                let e = {}
                e.dialogFormVisible = false
                this.form.role = this.form.role_id
                e.form = this.form
                e.form.exp_date = parseTime(e.form.exp_date, '{y}-{m}-{d}')
                for (let key in e.form) {
                    if (e.form[key] === '' || e.form[key] === undefined) {
                        return false
                    }
                    this.$emit('updata', e);

                }
            } else {
                let e = {}
                e.dialogFormVisible = false
                e.form = this.form
                this.$emit('updata', e);

            }

        },
    },
};
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from { 
//         opacity: 0;
//         transform: translateY(-100%);
//     }
//     to { 
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }
// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }
// ::v-deep .el-dialog__body{
//     min-height: 350px;
// }</style>